import { WeaTools, WeaLocaleProvider, WeaDialog, WeaMoreButton, WeaSignature, WeaRightMenu } from 'ecCom'
import { Button } from 'antd'
import { cloneDeep } from 'lodash'
import './style/index.css'
const getLabel = WeaLocaleProvider.getLabel;

/**
 * 手写签批
 */
export default class Main extends React.Component {

    constructor(props) {
        super(props);
        let { datas, modeType = "" } = this.props.datas
        let { signHandWrittenColor,signHandWrittenBrush } = this.props;
        let fromWhere = "PC";
        if (modeType.length > 1) {
            fromWhere = "MOBILE";
            modeType = JSON.parse(modeType);
        }
        this.state = {
            showCollect: false,
            datas: cloneDeep(this.props.datas) || {},
            brush: fromWhere == "MOBILE" ? modeType.brush : (this.props.datas.brush || signHandWrittenBrush),
            color: fromWhere == "MOBILE" ? modeType.color : (this.props.datas.color || signHandWrittenColor),
        }
    }
    componentDidMount() {
        this.WeaSignature && this.WeaSignature.initCanvas();
    }

    render() {
        let { visiable, changeVisiable } = this.props;
        const { showCollect, datas = {} } = this.state;
        //为什么要这样做：解决浅拷贝问题，不需要保存签批痕迹数据时却保存了
        let signPosition_datas = {};
        let isEmData = false;
        if (datas.url)
            isEmData = true;
        if (datas.datas) {
            if (typeof datas.datas == 'string') {
                signPosition_datas = JSON.parse(datas.datas)
            } else {
                signPosition_datas = datas.datas;
            }
        }
        if (!datas.mode && datas.modeType) {
            if (datas.modeType && datas.modeType.length > 1) {
                datas.mode = JSON.parse(datas.modeType).mode;
            } else {
                datas.mode = datas.modeType || "1";
            }
        }
        if (visiable) {
            return (
                <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@i3qjm0`}
                    title={getLabel(25349, "手写签批")}
                    visible={visiable}
                    icon='icon-coms-workflow'
                    iconBgcolor='#0079DE'
                    onCancel={() => {
                        //清空画的内容
                        changeVisiable(false)
                    }}
                    buttons={this.getDialogBtns()}
                    style={{ width: 1000, height: 574 }}
                    draggable={false}
                    layout={jQuery('.wf-req')[0]}
                    parentClassName={"wf-signature-dialog"}
                    destroyBodyOnClose
                >
                    <div className="wf-signature-wrap" style={{ height: '100%' }}>
                        {visiable && <WeaSignature ecId={`${this && this.props && this.props.ecId || ''}_WeaSignature@ecw4lz`}
                            canvasStyle={{
                                width: 1000,
                                height: 520
                            }}
                            needTrim={true}
                            needMergePicker={true}
                            ref={el => (this.WeaSignature = el)}
                            value={isEmData ? { client: "em", url: datas.url } : { ...datas, datas: signPosition_datas }}
                            color={this.state.color}
                            onChangeColor={this.onChangeColor}
                            mode={datas.mode || "1"}
                            onChangeBrush={this.onChangeBrush}
                            brush={this.state.brush}
                        />}
                    </div>
                </WeaDialog>)
        } else {
            return <div></div>
        }

    }

    onChangeBrush = (res) => {
        this.setState({ brush: res })
    }
    onChangeColor = (res) => {
        this.setState({ color: res })
    }

    getDialogBtns = () => {
        const { onOk } = this.props;
        return [
            (
                <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@dijh36@submit`}
                    type="primary"
                    onClick={() => {
                        onOk(this.WeaSignature.getDatas(), this.state.brush, this.state.color)
                    }
                    }>{getLabel(615, '提交')}
                </Button>),
            (<WeaMoreButton ecId={`${this && this.props && this.props.ecId || ''}_WeaMoreButton@jhejao@more`} datas={this.getMoreBtns()} />)
        ];
    }

    getMoreBtns = () => {
        const { onOk } = this.props
        let btns = [
            {
                key: '0',
                icon: <i className='icon-coms-Approval' />,
                content: getLabel(615, "提交"),
                onClick: () => onOk(this.WeaSignature.getDatas(), this.state.brush, this.state.color),
            }
        ];
        return btns;
    }

}